<template>
	<div style="padding:0px;">
		
		<el-form :model="dialogForm" :rules="rules" ref="dialogForm" :label-width="formLabelWidth">
			<el-card class="box-card">
			  <!-- <div slot="header" class="clearfix">
			    <span style="line-height: 30px;">上游供应商信息</span>
			  </div> -->
			  <div  class="text item">
				  	<el-form-item label="菜单名称"  >
				      <el-input v-model="dialogForm.menuName" auto-complete="off" ></el-input>
				    </el-form-item>
				    <el-form-item label="菜单地址" >
				      <el-input v-model="dialogForm.menuUrl" auto-complete="off" ></el-input>
				    </el-form-item>
				    <el-form-item label="路由地址" >
				      <el-input v-model="dialogForm.routeUrl" auto-complete="off" :disabled="authDialogSendData.oneLevel" ></el-input>
				    </el-form-item>
				    <el-form-item  v-if="!authDialogSendData.oneLevel" label-width="0px" style="margin-bottom:8px;">
				    	<el-button type="primary" @click="addAuth()" size="small" >添加权限</el-button>
				    </el-form-item>

				    <div v-if="!authDialogSendData.oneLevel" v-for="(item,index) in dialogForm.menuPermissionList" style="padding:5px;border:1px dashed #ccc;">
                        <div style="display:flex;">
                        	<el-form-item label="权限类型" label-width="80px" style="flex:1;margin-bottom:6px;margin-right: 2em;">    
						    	<el-select  style="width: 130px;"
				                    		v-model.number="item.type" 
				                    		placeholder="请选择类型" >
				                  <el-option  label="请选择类型" value="0" >
		                         </el-option>

			                     <el-option v-for="(item, index) in  systemPermissionEnum" :label="item" :value="parseInt(index)" :key="index">
		                         </el-option>
							    </el-select>    
						    </el-form-item> 

					    	<el-form-item label="权限名称" label-width="80px" style="flex:1;margin-right: 2em;margin-bottom:0;">
						      <el-input v-model="item.permissionName" auto-complete="off" ></el-input>
						    </el-form-item>
						    
						    <el-form-item label="权限key" label-width="80px" style="flex:1;margin-right: 0em;margin-bottom:0;">
						      <el-input v-model="item.permissionKey" auto-complete="off" ></el-input>
						    </el-form-item>
                        </div>
					    <div style="display:flex;">
					    	<el-form-item label="权限地址" label-width="80px"  style="width:100%;margin-right: 1em;margin-bottom:0;">
						      <el-input  v-model="item.permissionUrl" auto-complete="off" ></el-input>
						    </el-form-item>
						    <el-button style="margin-left:8px;" size="small" type="danger" @click="removeAuth(index)" >删 除</el-button>
					    </div>
					    
					    
				    </div>
				   
				</div>
			</el-card>
	    </el-form>
				
		<div  style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
	</div>
</template>
<script>
    import agentHttp from '@/utils/agentHttp.js'
	export default{
		components:{},
		created(){		

			if(!this.authDialogSendData.isAdd){ 
	      		this.dialogForm=this.authDialogSendData.data;  
	      	}
	      	else { 
	      		//如果不为空代表不是一级菜单
	      		if(this.authDialogSendData.data != undefined){
	      			this.dialogForm.parentMenuId = this.authDialogSendData.data.id;
	      		}else {
	      			this.dialogForm.parentMenuId = 0;
	      		}
	      	} 

        }, 
        updated(){
        },
		props:['authDialogSendData','systemPermissionEnum'],
		data(){
			return{

				id:99,
				rules:{},
				formLabelWidth:'170px',
				
				//弹窗或者查看页面信息
		        dialogForm:{
		        	menuName:"",
		        	menuUrl:"",
		        	routeUrl:"",
		        	menuPermissionList:[{permissionName:"",permissionUrl:"",permissionKey:"",type:null}]
		        },
			}
		},methods:{
			
			addAuth:function(index){					
				var permissionList = this.dialogForm.menuPermissionList;
				permissionList.splice(permissionList.length,0,{permissionName:"",permissionUrl:"",permissionKey:"",type:null});
			},
			removeAuth:function(index){	 
				var permissionList = this.dialogForm.menuPermissionList;
				permissionList.splice(index,1);
			},
			returnBack(){
				this.authDialogSendData.dialogFormVisible=false;
			},
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	if(this.authDialogSendData.isAdd){ //新增菜单并提交
                        this.addData();
		          	}else{
		          		this.editData();
		          	}
		          } else {
		            console.log('error submit!!');
		            return false;
		          }
		        });
			},
		    addData(){   
		    	var isRquest  = true; 
	    		//表示需要验证
		    	if(this.dialogForm.menuPermissionList.length > 0 && this.dialogForm.parentMenuId > 0 ){  
		    		isRquest = this.verification();
		    	} 
		    	if(isRquest){
		    		agentHttp.postJson('adminApi/admin/system_menu/add',this.dialogForm).then((data)=>{
			            if(data.success){   
			            	this.$emit('refreshSeachData');  
			            	this.authDialogSendData.dialogFormVisible=false;
			            	this.$message.success(data.data);
			            } 
		         	}) 
		    	}
		        
		    },
		    editData(){ 
		    	var isRquest  = true; 
 	    		//表示需要验证
		    	if(this.dialogForm.menuPermissionList.length > 0 && this.dialogForm.parentMenuId > 0){  
		    		isRquest = this.verification();
		    	} 
		    	if(isRquest){ 
			        agentHttp.putJson('adminApi/admin/system_menu/update',this.dialogForm).then((data)=>{
			            if(data.success){  
			            	this.$emit('refreshSeachData', null); 
			            	this.authDialogSendData.dialogFormVisible=false; 
			            	this.$message.success(data.data);
			            } 
			        }) 
		    	}
		    },
		    verification(){ 
		    	for (var i =0; i < this.dialogForm.menuPermissionList.length; i++){ 
		    		
		    		 var data = this.dialogForm.menuPermissionList[i]; 
		    		 if(data.permissionName == null || data.permissionName == ""){
		    		 	 this.$message.warning("当前第"+(i+1) +"行,权限名称为空...");
		    		 	 return   false;
		    		 }
		    		 if(data.type == null || data.type == ""){
		    		 	 this.$message.warning("当前第"+(i+1) +"行,权限类型为空...");
		    		 	 return   false;
		    		 }
		    		 if(data.permissionUrl == null || data.permissionUrl == ""){
		    		 	 this.$message.warning("当前第"+(i+1) +"行,权限地址为空...");
		    		 	 return   false;
		    		 }
		    		 if(data.permissionKey == null || data.permissionKey == ""){
		    		 	 this.$message.warning("当前第"+(i+1) +"行,权限Key为空...");
		    		 	 return   false ;
		    		 }  
		    	}
		    	return true;
		    }
		    

		}
	}
</script>
